<template>
  <view class="vehicle-maintenance">
    <view class="content-wrapper">
      <u-form :model="form" ref="form" label-width="100" error-type="none">
        <u-form-item label="异常类型:" borderBottom :required="true"
          @click="hadleShowPicker('reason_for_reporting', 'reasonForReporting')">
          <u--input disabled disabledColor="#ffffff" v-model="form.reasonForReporting_text" placeholder="请选择"
            border="none"></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item label="印刷时间:" borderBottom :required="true">
          <uni-datetime-picker return-type="timestamp" :start="startTime" :end="endTime" type="datetime"
            v-model="form.printTime" :border="false" hide-second>
            <view :class="{'time-selected': form.printTime ? true: false}" class="time-default">
              {{ form.printTime ?  formatters(form.printTime, 'YY-MM-DD HH:mm') : '请选择'  }}
            </view>
          </uni-datetime-picker>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item label="印刷数量:" borderBottom :required="false">
          <u--input v-model="form.printSum" placeholder="请填写" border="none" type="number"></u--input>
        </u-form-item>
        <u-form-item label="印刷人姓名:" borderBottom>
          <u--input v-model="form.printName" placeholder="请填写" border="none"></u--input>
        </u-form-item>
        <u-form-item label="印刷人电话:" borderBottom>
          <u--input v-model="form.printPhone" disabledColor="#ffffff" placeholder="请选择" border="none"></u--input>
        </u-form-item>
        <u-form-item label="图片上传:" :required="true" label-width="auto">
          <text class="img-tips"> (可上传1-9张照片，可上传印刷内容、付款账号)</text>
        </u-form-item>
        <u-upload :fileList="fileList" @afterRead="afterReadFive" @delete="deletePhoto" name="file" :maxCount="9"
          :multiple="true" width="96" height="80">
          <image :src="baseImgUrl + 'upload-icon3.png'" style="width: 200rpx; height: 160rpx"></image>
        </u-upload>
        <u-form-item label="备注信息:"> </u-form-item>
        <textarea placeholder-class="input-placeholder" v-model="form.remark" class="text-area-style"
          placeholder="请填写"></textarea>
      </u-form>
    </view>
    <view class="button-wrapper">
      <view class="cancel btn-item" @click="handleCancel">取消</view>
      <view class="submit btn-item" @click="handleSubmit">提交</view>
    </view>
    <u-picker closeOnClickOverlay :show="pickerShow" :columns="pickerData" keyName="text" @confirm="onPickerConfirm"
      @cancel="pickerShow = false" @close="pickerShow = false"></u-picker>
  </view>
</template>

<script>
  import {
    Toast,
    useNetWork,
    isLoading,
    uploadFile,
    navBack,
    regPhone,
    formatters,
    getTimestampDaysAgo,
    getEndOfTodayTimestamp,
    getHeader
  } from "@/utils/util.js";
  import {
    ajaxGetDictItems
  } from "@/api/api.js";
  import {
    maintenanceProntAdd
  } from "@/api/myself.js";

  export default {
    data() {
      return {
        imgPrefix: uni.getStorageSync("imgPrefix"),
        baseImgUrl: this.$baseImgUrl,
        baseURL: this.$baseURL,
        form: {
          companyMessageId: "",
          reasonForReporting: "",
          printTime: "",
          printSum: "",
          printName: "",
          printPhone: "",
          remark: "",
        },
        fileList: [],
        interiorUrlList: [],
        array: [],
        index: undefined,
        options: {},
        pickerData: [
          []
        ],
        // 表示当前 picker 正在给那个 form 字段填充值
        pickerShow: false,
        pickerWithFormKey: "",
        dictMapping: {},
        startTime: getTimestampDaysAgo(5),
        endTime: getEndOfTodayTimestamp()
      };
    },
    onLoad(options) {
      this.options = options;
      this.initDict();
    },
    methods: {
      formatters,
      afterReadFive(info) {
        useNetWork(); // 判断是否有网络
        this.file5Num += info.file.length;
        let promiseList = info.file.map((v) => {
          return uploadFile({
            url: "/web/sys/upload/upload_file",
            filePath: v.url,
            name: "file",
            formData: {
              type: 19,
            },
          });
        });
        isLoading();
        Promise.all(promiseList)
          .then((res) => {
            console.log(res)
            res.forEach((item) => {
              let result = item.result
              this.fileList.push({
                url: result.fullPath,
              })
              this.interiorUrlList.push(result.halfPath)
            })
          })
          .catch((err) => {})
          .finally(() => {
            isLoading(false);
          });
      },
      deletePhoto(e) {
        this.fileList.splice(e.index, 1);
        this.interiorUrlList.splice(e.index, 1);
      },
      carColorChange(e) {
        this.form.reasonForReporting = e.detail.value;
      },
      initDict() {
        let allCode = uni.getStorageSync("allCode");
        Object.assign(this.dictMapping, allCode);
      },
      handleCancel() {
        navBack()
      },
      handleSubmit() {
        let {
          reasonForReporting,
          printTime,
          printSum,
          printName,
          printPhone,
          remark,
        } = this.form;

        if (!reasonForReporting) {
          Toast('请选择异常类型！')
          return
        }
        if (!printTime) {
          Toast('请选择印刷时间！')
          return
        }
        // if (!printSum) {
        //   Toast('请填写印刷数量！')
        //   return
        // }

        // if (!regPhone(printPhone)) {
        //   Toast('请输入正确的手机号码！')
        //   return
        // }
        if (this.interiorUrlList.length === 0) {
          Toast('请上传照片！')
          return
        }
        let params = {
          ...this.form,
          companyMessageId: this.options.companyMessageId,
          printSum: this.form.printSum ? parseInt(this.form.printSum) : 0,
          imageListUrl: this.interiorUrlList,
          printTime: Math.floor(printTime / 1000) * 1000
        };
        maintenanceProntAdd(params).then((res) => {
          Toast(res.message);
          setTimeout(() => {
            navBack()
          }, 500)
        });
      },
      hadleShowPicker(dictName, formKey) {
        this.pickerWithFormKey = formKey;
        this.pickerData[0] = this.dictMapping[dictName] || [];
        this.pickerShow = true;
      },
      onPickerConfirm(data) {
        let {
          value,
          text
        } = data.value[0];
        this.form[this.pickerWithFormKey] = value;
        this.$set(this.form, `${this.pickerWithFormKey}_text`, text);
        this.pickerShow = false;
      },
    },
  };
</script>

<style lang="scss">
  page {
    background: #f9f9f9;

    .uni-date-x--border {
      border: 0;
    }

    .uni-date-x .icon-calendar {
      display: none;
    }


    .uni-date__x-input {
      font-weight: 400 !important;
      font-size: 28rpx !important;
    }

    .uni-date__x-input {}

    .u-form-item__body__left__content__label {
      font-weight: 500 !important;
      font-size: 28rpx !important;
      color: #666666 !important;
      margin-left: 11rpx !important;
    }

    ::v-deep .input-placeholder {
      font-weight: 400 !important;
      font-size: 28rpx !important;
      color: #A1A1A1 !important;
    }

    .u-input__content__field-wrapper__field {
      font-weight: bold;
      font-size: 28rpx;
      color: #000000;
    }
  }
</style>
<style lang="scss" scoped>
  .vehicle-maintenance {
    padding: 0 8rpx;
    padding-top: 23rpx;

    .content-wrapper {
      background: #ffffff;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      padding: 0 20rpx;
      padding-bottom: 120rpx;
      padding-left: 30rpx;

      .car-color {
        font-weight: 400;
        font-size: 28rpx;
        color: #a1a1a1;
      }

      .text-area-style {
        width: 656rpx;
        height: 216rpx;
        background: #f9f9f9;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        padding: 20rpx;
      }
    }

    .button-wrapper {
      position: fixed;
      bottom: 0;
      left: 0;
      height: 104rpx;
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      z-index: 10;
      padding: 0 35rpx;

      .btn-item {
        width: 324rpx;
        height: 88rpx;
        border-radius: 44rpx 44rpx 44rpx 44rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .cancel {
        background: #ebebeb;
      }

      .submit {
        background: #2488f5;
        color: #fff;
      }
    }

    .img-tips {
      font-weight: 400;
      font-size: 24rpx;
      color: #BBBBBB;
    }

    .time-default {
      font-weight: 400;
      font-size: 28rpx;
      color: #A1A1A1;
    }

    .time-selected,
    .text-area-style {
      font-weight: bold;
      font-size: 28rpx;
      color: #000000;
    }
  }
</style>